<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {DevCascaderMutex, devObjEstimation, devUseExtractSelected} from 'devecoui-plus';

const options = ref([
  {
    label: '植物界',
    value: 'plantae',
    children: [
      {
        label: '被子植物',
        value: 'angiosperms',
        children: [
          {
            label: '单子叶植物',
            value: 'monocots'
          },
          {
            label: '双子叶植物',
            value: 'dicots'
          }
        ]
      },
      {
        label: '裸子植物',
        value: 'gymnosperms',
        children: [
          {
            label: '松科',
            value: 'pinaceae'
          },
          {
            label: '柏科',
            value: 'cupressaceae'
          }
        ]
      },
      {
        label: '蕨类植物',
        value: 'ferns',
        children: [
          {
            label: '水龙骨科',
            value: 'polypodiaceae'
          },
          {
            label: '蹄盖蕨科',
            value: 'dryopteridaceae'
          }
        ]
      }
    ]
  },
  {
    label: '动物界',
    value: 'animalia',
    children: [
      {
        label: '哺乳动物',
        value: 'mammals',
        children: [
          {
            label: '食肉目',
            value: 'carnivores'
          },
          {
            label: '偶蹄目',
            value: 'artiodactyla'
          }
        ]
      },
      {
        label: '鸟类',
        value: 'birds',
        children: [
          {
            label: '猛禽',
            value: 'raptors'
          },
          {
            label: '鸣禽',
            value: 'oscine'
          }
        ]
      },
      {
        label: '爬行动物',
        value: 'reptiles',
        children: [
          {
            label: '蜥蜴',
            value: 'lizards'
          },
          {
            label: '蛇',
            value: 'snakes'
          }
        ]
      }
    ]
  }
]);

const list = ref<any>([
  {
    value: [],
    id: 1
  }
]);
const allSelectValue = devUseExtractSelected(list.value, 'value', false);

/**
 * 添加选项
 */
const addList = () => {
  list.value.push({
    value: [],
  });
};

/**
 * 删除选项
 * @param index
 */
const deleteItem = (index: number) => {
  list.value.splice(index, 1);
};

const optionsPath = ref({});
onMounted(() => {
  optionsPath.value = devObjEstimation(options.value, 'value', 'label', 'children');
});


</script>

<template>
  <div v-for="(item,index) in list" :key="item.id" style="display: flex;align-items: center;margin-top: 10px">
    <dev-cascader-mutex
        v-model="item.value"
        :props="{
        multiple:false,
        emitPath:false
      }"
        :all-select-value="allSelectValue"
        :options="options"
        :options-path="optionsPath"/>
    <el-button style="margin-left: 10px" type="primary" @click="addList">新增</el-button>
    <el-button :disabled="list.length<=1" @click="deleteItem(index)">删除</el-button>
  </div>
</template>
